
<script >
import addBook from "./addBook.vue";
import editBook from "@/components/admin/editBook.vue";
import axios from "axios";
import Bottom from "@/components/userCommon/bottom.vue";
export default {
  components:{
    addBook,
    editBook,
    Bottom
  },
  data(){
    return{
      Visiable:false,
      editVisiable:false,
      search:"",
      tableData:[]
    }
  },

  async created() {
    try {
      axios({
        method:"get",
        url:"http://localhost:5000//admin/getBook",
        // params:{
        //   admin_id:"27"
        // }

      }).then((res)=>{
        this.tableData=res.data.data
      })
    } catch (error) {
      console.error(error);
    }
  },
  methods:{
    jumpBook(){
      this.$router.push('/admin/book')
    },
    jumpUser(){
      this.$router.push('/admin/user')
    },
    jumpAnnouncement(){
      this.$router.push('/admin/announcement')
    },
    jumpChart(){
      this.$router.push('/admin/chart')
    },
    jumpEdit(){
      this.$router.push('/admin/edit')
    },
    jumpChat(){
      this.$router.push('/admin/chat')
    },
    onSearch(){
      axios({
        method:"get",
        url:"http://localhost:5000//admin/book/search",
        params:{
          admin_id:"27",
          keywords:this.search
        }

      }).then((res)=>{
        this.tableData=res.data.data
      })
    },
    editBook(row){
      this.editVisiable=true;
      this.$nextTick(()=>{
        //这里的dialog与上面dialog-component组件里面的ref属性值是一致的
        //init调用的是dialog-component组件里面的init方法
        //data是传递给弹窗页面的值
        this.$refs.dialog.init(row);
      })
    },
    del(row){
      this.$confirm('此操作将永久删除该书, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row.book_code)
        console.log(row.type)
        axios({
          method:"get",
          url:"http://localhost:5000//admin/book/del",
          params:{
            admin_id:"27",
            type:row.type,
            book_id:row.book_code
          }

        }).then((res)=>{
          axios({
            method:"get",
            url:"http://localhost:5000//admin/getBook",
          }).then((res)=>{
            this.tableData=res.data.data
          })
          if(res.data.data==="该书籍已删除"){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }else{
            this.$message({
              type: 'info',
              message: res.data.data
            });
          }

        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    addBookScan(data){
      this.Visiable=true;
      this.$nextTick(()=>{
        //这里的dialog与上面dialog-component组件里面的ref属性值是一致的
        //init调用的是dialog-component组件里面的init方法
        //data是传递给弹窗页面的值
        this.$refs.dialog.init(data);
      })
    },
    addBook(){
      this.Visiable=true;
      this.$nextTick(()=>{
        //这里的dialog与上面dialog-component组件里面的ref属性值是一致的
        //init调用的是dialog-component组件里面的init方法
        //data是传递给弹窗页面的值
        this.$refs.dialog.init();
      })
    },
    onScan(){
      console.log("点击扫一扫")
      axios({
        method:"get",
        url:"http://localhost:5000//admin/book/add/code"
      }).then((res)=>{
        this.addBookScan(res.data)
      })
    },
    onScanReturn(){
      axios({
        method:"get",
        url:"http://localhost:5000//manager/scan"
      })
    }
  }
}
</script>

<template>
  <div style="background-color: rgb(237,237,237)">
    <ul>
      <li>
        <img src="../../assets/img/common/logo.png" alt = "logo" class = "logo">
      </li>
      <li class="current">
        <a @click = jumpBook>图书管理</a>
      </li>
      <li class="other">
        <a @click="jumpUser">用户管理</a>
      </li>
      <li class="other">
        <a @click=jumpAnnouncement>公告管理</a>
      </li>
      <li class="other">
        <a @click = jumpChart>数据报表</a>
      </li>
      <li class="other">
        <a @click = jumpEdit>个人中心</a>
      </li >
      <li class="other2" v-on:click="jumpChat">
        <img src="../../assets/img/common/msg.jpg" alt="msg" class="logo">
      </li>
    </ul>
    <img src="../../assets/img/admin/book.png" alt="图书管理" class="top-img">
    <div>

        <input type="button" class="add-user" value="新增图书" @click="addBook">
        <addBook v-if="Visiable" ref="dialog"></addBook>
        <editBook v-if="editVisiable" ref="dialog"></editBook>
        <input type="button" class="scan" value="扫一扫新增书籍" @click="onScan">
        <input type="button" class="scan" value="扫一扫还书" @click="onScanReturn">
      <div class="search-div">
        <img src="../../assets/img/common/search.png" alt="search" class="search-img">
        <input type="search" class="search" v-model="search" >
        <input type="button" class="search-button" value="搜索" @click="onSearch">
      </div>
    </div>
      <el-table :data="tableData" stripe class="table">
        <el-table-column class="table-column" prop="name" label="书籍名称" width="180"></el-table-column>
        <el-table-column class="table-column" prop="author" label="作者" width="120"></el-table-column>
        <el-table-column class="table-column" prop="publisher" label="出版社"></el-table-column>
        <el-table-column class="table-column" prop="type" label="书籍类型" width="100"></el-table-column>
        <el-table-column class="table-column" prop="source" label="书籍来源"></el-table-column>
        <el-table-column class="table-column" prop="publish_time" label="出版时间"></el-table-column>
        <el-table-column class="table-column" prop="inventory" label="库存"></el-table-column>
        <el-table-column class="table-column" prop="price" label="价格"></el-table-column>
        <el-table-column class="table-column" prop="book_code" label="条形码"></el-table-column>
        <el-table-column class="table-column" label="操作" width="200">
          <template v-slot:default="scope">
            <div class="buttons" >
              <input type="button" class="add-book" value="编辑" @click="editBook(scope.row)">
              <input type="button" class="del-book" value="删除" @click="del(scope.row)" >
            </div>
          </template>
        </el-table-column>
      </el-table>

    <img src="../../assets/img/common/search.png" alt="search" class="search-img">
    <Bottom style="background-color: white"></Bottom>
  </div>
</template>

<style scoped>

ul{
  display: flex;
  background-color: rgb(168,189,203);
  margin: 0;
}
li{
  display: inline-block;
  height: 80%;
  width: 12%;
  padding: 1% 0;
  margin: auto ;
  text-align: center;
}
li.current{
  border-bottom: 5px solid white;
}
li.other:hover{
  cursor: pointer;
  border-bottom: 5px solid white;
}
li.other2:hover{
  cursor: pointer;
  border-bottom: 5px solid rgb(168,189,203);;
}
li>a{

  display: block;
  text-decoration: none;
  font-size: 25px;
  letter-spacing: 5px;
  color: rgba(255, 255, 255, 1);
  font-family: "Arial Black",fantasy;
  margin: 0;
}
.logo{
  vertical-align: middle;
}
.table{
  //border-radius: 25px;
  width: 80vw;
  margin: 2% auto;

}
th,td{
  padding: 10px 10px 15px 10px;
  text-align: center;
}
th{
  letter-spacing: 0.1em;
  border-top: 2px solid #999;
  border-bottom: 4px solid #111111;

}
tr.even{
  background-color: #efefef;
}
.add-book{
  background-color: rgb(174,186,147);
  width: 80%;
  height: 100%;
  padding: 12px 2px 15px 2px;
  border-radius: 15px;
  font-weight: bolder;
  color: white;
  cursor: pointer;
  border: none;
}
.add-book:hover{
  background-color: darkolivegreen;
}
.del-book{
  background-color: rgb(207,118,118);
  width: 80%;
  height: 100%;
  padding: 12px 2px 15px 2px;
  border-radius: 15px;
  font-weight: bolder;
  color: white;
  cursor: pointer;
  border: none;
}
.del-book:hover{
  background-color: red;
}
.add-user{
  display: inline-block;
  width: 10vw;
  height: 5vh;
  margin: 0 1% 0 10%;
  color: white;
  font-weight: bold;
  border-radius: 15px;
  font-size: 120%;
  padding: 5px;
  cursor: pointer;
  background-color: rgb(143,175,185);
  border: none;
}
.add-user:hover{
  background-color: rgb(120,175,185);
}
.share{
  display: inline-block;
  width: 10vw;
  height: 5vh;
  margin: 0 0 0 1%;
  border-radius: 15px;
  color: white;
  font-weight: bold;
  font-size: 120%;
  padding: 5px;
  cursor: pointer;
  background-color: rgb(107,144,156);
  border: none;
}
.share:hover{
  background-color: rgb(120,175,185);
}
.scan{
  display: inline-block;
  width: 10vw;
  height: 5vh;
  margin: 0 0 0 1%;
  border-radius: 15px;
  color: white;
  font-weight: bold;
  font-size: 120%;
  padding: 5px;
  cursor: pointer;
  background-color: rgb(143,175,185);
  border: none;
}
.share:hover{
  background-color: rgb(120,175,185);
}
.search{
  position: absolute;
  display: inline-block;
  width: 20vw;
  height: 6vh;
  border-radius: 25px;
  padding: 15px;
  text-indent: 30px;
  z-index: 3;
  left: 70vw;
}


.top-img{
  width: 76vw;
  height: 11vh;
  margin-left: 12%;
}
.search-div{
  width: 20vw;
  height: 5vh;
  float: right;
}
.search-img{
  width: 30px;
  height: 30px;
  z-index: 4;
  position: relative;
  left: -125px;
  top: 7px;
}
.search-button{
  position: relative;
  left: 15%;
  top: -1px;
  background-color: rgb(57,74,121);
  z-index: 6;
  color: white;
  font-size: 120%;
  border-radius: 25px;
  width: 25%;
  height: 80%;
  cursor: pointer;
}
.buttons{
  display: flex;
  justify-content: space-between; /* 使按钮之间有空隙 */
  align-items: center; /* 垂直居中 */
  width: 100%; /* 确保宽度填满表头单元格 */

}
::v-deep.table {
  width: 80vw;
  margin: 2% auto;
}

::v-deep.table-column {
  text-align: center;

}
::v-deep .el-table--striped .el-table body tr.el-table_row--striped td {
  background-color: darkgrey;
}

::v-deep.table th{
  letter-spacing: 0.1em;
  border-top: 2px solid #999;
  border-bottom: 4px solid #111111;
  text-align: center;
  color: black;
}
::v-deep .el-table td, .el-table th {
  text-align: center;
}
</style>